﻿<ui:DialogWindowVersioningWorkaround
    x:Class="Microsoft.NodejsTools.NpmUI.NpmPackageInstallWindow"
    x:ClassModifier="internal"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:npmUi="clr-namespace:Microsoft.NodejsTools.NpmUI"
    xmlns:ui="clr-namespace:Microsoft.VisualStudioTools"
    xmlns:wpf="clr-namespace:Microsoft.VisualStudioTools.Wpf"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="Install New npm Packages"
    Height="500"
    MinHeight="500"
    Width="700"
    MinWidth="600"
    WindowStartupLocation="CenterOwner"
    Background="{DynamicResource {x:Static wpf:Controls.BackgroundKey}}"
    ResizeMode="CanResizeWithGrip">
    <!-- Theming -->
    <Window.Resources>
        <ResourceDictionary>
            <Geometry x:Key="SearchGeometry">F1 M 8.5,7.0 C 7.12,7.00 6.0,5.88 6.0,4.5 C 6.0,3.12 7.12,2.0 8.5,2.0 C 9.88,2.0 11.0,3.12 11.0,4.5 C 11.0,5.88 9.88,7.0 8.5,7.0 Z M 8.5,0.0 C 6.02,0.0 4.0,2.02 4.0,4.500 C 4.0,5.23 4.19,5.9 4.49,6.5 L 0.0,11.0 L 2.0,13.0 L 6.49,8.51 C 7.1,8.81 7.77,9.0 8.5,9.0 C 11.0,9.0 13.0,7.0 13.0,4.5 C 13.0,2.02 11.0,0.0 8.5,0.0 Z</Geometry>
            <Style x:Key="SearchStyle" TargetType="ContentControl">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Path Data="{StaticResource SearchGeometry}" Fill="{DynamicResource {x:Static wpf:Controls.SearchGlyphBrushKey}}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0 0 4 0" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            
            <wpf:ComparisonConverter 
                x:Key="ResultsAvailableConverter"
                IfTrue="{x:Static Visibility.Visible}"
                IfFalse="{x:Static Visibility.Hidden}"
                Operator="EqualTo"
                SecondOperand="{x:Static npmUi:NpmPackageInstallViewModel+FilterState.ResultsAvailable}" />

            <wpf:ComparisonConverter 
                x:Key="NoFilterTextConverter"
                IfTrue="{x:Static Visibility.Visible}"
                IfFalse="{x:Static Visibility.Hidden}"
                Operator="EqualTo"
                SecondOperand="{x:Static npmUi:NpmPackageInstallViewModel+FilterState.NoFilterText}" />

            <wpf:ComparisonConverter 
                x:Key="NoResultsFoundConverter"
                IfTrue="{x:Static Visibility.Visible}"
                IfFalse="{x:Static Visibility.Hidden}"
                Operator="EqualTo"
                SecondOperand="{x:Static npmUi:NpmPackageInstallViewModel+FilterState.NoResults}" />

            <wpf:ComparisonConverter 
                x:Key="FilteringConverter"
                IfTrue="{x:Static Visibility.Visible}"
                IfFalse="{x:Static Visibility.Hidden}"
                Operator="EqualTo"
                SecondOperand="{x:Static npmUi:NpmPackageInstallViewModel+FilterState.Filtering}" />

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Microsoft.NodejsTools;component/SharedProject/Wpf/Controls.xaml" />
                <ResourceDictionary>
                    <Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource {x:Type ListViewItem}}">
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                    </Style>

                    <DataTemplate x:Key="PackageInfoTemplate">
                        <StackPanel Name="PackageInfo">
                            <TextBlock Margin="0">
                                <Run Text="{Binding Path=Name, Mode=OneWay}" FontSize="15pt" FontWeight="Bold" />
                                <Run Text="{Binding Path=Version, Mode=OneWay}" />
                            </TextBlock>

                            <TextBlock Margin="0 4 0 4"
                                        Text="{Binding Keywords, Mode=OneWay}"
                                        TextWrapping="Wrap"
                                        Opacity="0.5" />

                            <StackPanel Orientation="Horizontal" Margin="0 4 0 4" x:Name="AuthorBlock" Visibility="{Binding Path=AuthorVisibility, Mode=OneWay}">
                                <TextBlock Margin="0" FontWeight="Bold" xml:space="preserve">Author: </TextBlock>
                                <TextBlock Text="{Binding Path=Author, Mode=OneWay}"/>
                            </StackPanel>

                            <StackPanel Margin="0 4 0 4" x:Name="HomepageBlock"
                                Visibility="{Binding HomepagesVisibility}"
                                Orientation="Horizontal">
                                <TextBlock Margin="0" FontWeight="Bold" xml:space="preserve">Homepage: </TextBlock>
                                <ItemsControl ItemsSource="{Binding Path=Homepages, Mode=OneWay}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Button Style="{StaticResource NavigationButton}"
                                                    Content="{Binding Mode=OneWay}"
                                                    Command="{x:Static npmUi:NpmPackageInstallViewModel.OpenHomepageCommand}"
                                                    CommandParameter="{Binding}"
                                                    KeyboardNavigation.IsTabStop="False"
                                                    Margin="0"
                                                    Padding="0"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>

                            <TextBlock Margin="0 4 0 4" TextWrapping="Wrap" x:Name="DescriptionBlock" Visibility="{Binding Path=DescriptionVisibility, Mode=OneWay}">
                                <Run FontWeight="Bold" xml:space="preserve">Description: </Run>
                                <Run Text="{Binding Path=Description, Mode=OneWay}"/>
                            </TextBlock>
                        </StackPanel>
                    </DataTemplate>

                    <DataTemplate DataType="{x:Type npmUi:ReadOnlyPackageCatalogEntryViewModel}">
                        <Grid>
                            <Grid.InputBindings>
                                <MouseBinding Gesture="LeftDoubleClick"
                                              Command="{x:Static npmUi:NpmPackageInstallViewModel.InstallCommand}"
                                              CommandParameter="{Binding}" />
                                <KeyBinding Command="{x:Static npmUi:NpmPackageInstallViewModel.InstallCommand}"
                                CommandParameter="{Binding}" Key="Enter" Gesture="ENTER"/>
                            </Grid.InputBindings>
                            <Grid.RowDefinitions>
                                <!-- Name/Version/Author -->
                                <RowDefinition Height="auto" />
                                <!-- Description -->
                                <RowDefinition Height="auto" />
                                <!-- Keywords/Install -->
                                <RowDefinition Height="auto" />
                                <!-- Separator -->
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>

                            <Grid Grid.Row="0" Margin="3">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="auto" />
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="0"
                                           Text="{Binding Name,Mode=OneWay}"
                                           TextTrimming="CharacterEllipsis"
                                           ToolTip="{Binding Name,Mode=OneWay}"
                                           FontWeight="Bold" />

                                <TextBlock Grid.Column="1"
                                           Margin="3 0 0 0"
                                           Text="{Binding Version,Mode=OneWay}" />

                                <TextBlock Grid.Column="3"
                                           Text="{Binding Author,Mode=OneWay}"
                                           TextTrimming="CharacterEllipsis"
                                           ToolTip="{Binding Author,Mode=OneWay}"
                                           Opacity="0.6" />
                            </Grid>

                            <TextBlock Grid.Row="1"
                                       Margin="3"
                                       Text="{Binding Description,Mode=OneWay}"
                                       TextWrapping="Wrap" 
                                       TextTrimming="CharacterEllipsis" Height="30"/>

                            <Grid Grid.Row="2" Margin="3 6 3 3">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="auto" />
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="1"
                                           x:Name="LocalInstallMessage"
                                           Visibility="Collapsed"
                                           FontWeight="Bold">
                                    Installed locally
                                </TextBlock>
                                <TextBlock Grid.Column="1"
                                           x:Name="LocalInstallOutOfDateMessage"
                                           Visibility="Collapsed"
                                           FontWeight="Bold"
                                           Foreground="Red">
                                    <Run>Old version</Run>
                                    <Run Text="{Binding LocalVersion,Mode=OneWay}" />
                                    <Run>installed locally</Run>
                                </TextBlock>
                                <TextBlock Grid.Column="2"
                                           x:Name="InstallMessageSeparator"
                                           Visibility="Collapsed">
                                    <Run xml:space="preserve">; </Run>
                                </TextBlock>

                                <TextBlock Grid.Column="3"
                                           x:Name="GlobalInstallMessage"
                                           Visibility="Collapsed"
                                           FontWeight="Bold">
                                    Installed globally
                                </TextBlock>
                                <TextBlock Grid.Column="3"
                                           x:Name="GlobalInstallOutOfDateMessage"
                                           Visibility="Collapsed"
                                           FontWeight="Bold"
                                           Foreground="Red">
                                    <Run>Old version</Run>
                                    <Run Text="{Binding GlobalVersion,Mode=OneWay}" />
                                    <Run>installed globally</Run>
                                </TextBlock>
                            </Grid>

                            <Separator Grid.Row="3" Margin="0 4 0 2" />
                        </Grid>

                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding IsInstalledLocally}" Value="true">
                                <Setter TargetName="LocalInstallMessage" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsLocalInstallOutOfDate}" Value="true">
                                <Setter TargetName="LocalInstallMessage" Property="Visibility" Value="Collapsed" />
                                <Setter TargetName="LocalInstallOutOfDateMessage" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsInstalledGlobally}" Value="true">
                                <Setter TargetName="GlobalInstallMessage" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsGlobalInstallOutOfDate}" Value="true">
                                <Setter TargetName="GlobalInstallMessage" Property="Visibility" Value="Collapsed" />
                                <Setter TargetName="GlobalInstallOutOfDateMessage" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsInstalledLocally}" Value="true" />
                                    <Condition Binding="{Binding IsInstalledGlobally}" Value="true" />
                                </MultiDataTrigger.Conditions>
                                <Setter TargetName="InstallMessageSeparator" Property="Visibility" Value="Visible" />
                            </MultiDataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>

                    <DataTemplate DataType="{x:Type npmUi:LastRefreshedMessageProvider}">
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0"
                                       Margin="0 0 3 0"
                                       VerticalAlignment="Center">
                                Catalog Updated
                            </TextBlock>
                            <TextBlock Grid.Column="1"
                                       x:Name="Message"
                                       Text="{Binding Description}"
                                       VerticalAlignment="Center"/>
                        </Grid>
                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding IsAncient}" Value="True">
                                <Setter TargetName="Message" Property="Foreground" Value="Red" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsOld}" Value="True">
                                <Setter TargetName="Message" Property="FontWeight" Value="Bold" />
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>

                    <DataTemplate DataType="{x:Type npmUi:NpmOutputViewModel}">
                        <Ellipse x:Name="StatusIcon" Width="14" Height="14" Stroke="Gray" StrokeThickness="1" Margin="0 0 2 0" VerticalAlignment="Center"/>

                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding WithErrors}" Value="True">
                                <Setter TargetName="StatusIcon" Property="Fill" Value="Red"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding WithErrors}" Value="False">
                                <Setter TargetName="StatusIcon" Property="Fill" Value="#80B5FFA9"/>
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Window.CommandBindings>
        <CommandBinding Command="ApplicationCommands.Close"
                        Executed="Close_Executed"
                        CanExecute="Close_CanExecute" />
        <CommandBinding Command="{x:Static npmUi:NpmPackageInstallViewModel.InstallCommand}"
                        Executed="InstallCommand_Executed"
                        CanExecute="InstallCommand_CanExecute" />
        <CommandBinding Command="{x:Static npmUi:NpmPackageInstallViewModel.RefreshCatalogCommand}"
                        Executed="RefreshCatalogCommand_Executed"
                        CanExecute="RefreshCatalogCommand_CanExecute" />
        <CommandBinding Command="{x:Static npmUi:NpmPackageInstallViewModel.OpenHomepageCommand}"
                        Executed="OpenHomepageCommand_Executed"
                        CanExecute="OpenHomepageCommand_CanExecute" />
    </Window.CommandBindings>

    <Grid VerticalAlignment="Stretch"
                   Height="Auto"
                   HorizontalAlignment="Stretch"
                   Width="Auto"
                   Margin="4 4 4 4">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="1" Margin="0 6 0 0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ProgressBar Name="_progress"
                             Height="4"
                             IsIndeterminate="true"
                             Visibility="{Binding Path=ExecuteViewModel.ExecutionProgressVisibility}" Grid.Row="1" Grid.ColumnSpan="2"/>
            <StackPanel Grid.Row="0" Grid.Column="0" VerticalAlignment="Center">
                <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="4" Orientation="Horizontal">

                    <ContentControl Content="{Binding ExecuteViewModel}" Focusable="False" IsTabStop="False"/>

                    <Button x:Name="npmInstallOutputLink"
                            Style="{StaticResource NavigationButton}"
                            Click="ShowOutputWindow_Click"
                            KeyboardNavigation.TabIndex="9"
                            ContentStringFormat="{}npm install Output: {0}"
                            Content="{Binding ExecuteViewModel.StatusText}" />
                </StackPanel>
            </StackPanel>

            <Button x:Name="CloseButton"
                        Grid.Column="1"
                        Command="ApplicationCommands.Close"
                        IsCancel="True"
                        KeyboardNavigation.TabIndex="10">
                _Close
            </Button>
        </Grid>

        <Grid Visibility="{Binding FilterControlsVisibility}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*" MinHeight="30" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5*" MinWidth="100"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="7*" MinWidth="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="0" Grid.Column="0">

                <TextBox x:Name="FilterTextBox"
                             IsVisibleChanged="FilterTextBox_IsVisibleChanged"
                             Height="24"
                             Text="{Binding FilterText,UpdateSourceTrigger=PropertyChanged}"
                             PreviewKeyDown="FilterTextBox_PreviewKeyDown"
                             KeyboardNavigation.TabIndex="0"/>
                <TextBlock IsEnabled="False" Background="{x:Null}"
                           Focusable="False"
                           IsHitTestVisible="False"
                           IsManipulationEnabled="False"
                                    x:Name="SearchBlock" FontStyle="Italic" Padding="6 4 0 0" Opacity="0.5">
                            Search for packages
                    <TextBlock.Style>
                        <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static wpf:Controls.ForegroundKey}}" />
                            <Setter Property="Visibility" Value="Hidden"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding FilterText}"  Value="">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding FilterText}"  Value="{x:Null}">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </Grid>

            <ContentControl Style="{StaticResource SearchStyle}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" Focusable="False" />
            <Grid Grid.Row="1" Background="{Binding ElementName=_packageList, Path=Background}">
                <ListView x:Name="_packageList"
                          ItemsSource="{Binding FilteredPackages}"
                          SelectedItem="{Binding SelectedPackage}"
                          SelectionChanged="_packageList_SelectionChanged"
                          PreviewKeyDown="_packageList_PreviewKeyDown"
                          HorizontalContentAlignment="Stretch"
                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                          MinHeight="0"
                          KeyboardNavigation.TabIndex="1" 
                          Visibility="{Binding Path=PackageFilterState, Converter={StaticResource ResultsAvailableConverter}}"/>
                <Border BorderBrush="{Binding ElementName=_packageList, Path=BorderBrush}"
                        BorderThickness="{Binding ElementName=_packageList,Path=BorderThickness}">
                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock HorizontalAlignment="Center"
                                   Visibility="{Binding Path=PackageFilterState, Converter={StaticResource NoFilterTextConverter}}">
                            Type to search for packages.
                        </TextBlock>
                        <ProgressBar 
                    HorizontalAlignment="Stretch"
                    IsEnabled="True" 
                    IsIndeterminate="True"
                    Visibility="{Binding Path=PackageFilterState, Converter={StaticResource FilteringConverter}}"/>
                        <TextBlock 
                    HorizontalAlignment="Center"
                    Visibility="{Binding Path=PackageFilterState, Converter={StaticResource NoResultsFoundConverter}}">
                    No results found.
                        </TextBlock>
                    </Grid>
                </Border>
            </Grid>
            <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Width="6" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="True" />

            <Grid Grid.Row="2" VerticalAlignment="Top" Margin="0 4 0 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!-- Package cache control -->


                <ContentControl Grid.Column="0"
                                    Content="{Binding LastRefreshedMessage}"
                                    Foreground="{DynamicResource {x:Static wpf:Controls.ForegroundKey}}"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Stretch"
                                    Focusable="False"
                                    IsTabStop="False"/>

                <Button Grid.Column="1" HorizontalAlignment="Right" Margin="0"
                        Name="RefreshButton"
                        Command="{x:Static npmUi:NpmPackageInstallViewModel.RefreshCatalogCommand}"
                        KeyboardNavigation.TabIndex="8"
                        xml:space="preserve">Refresh</Button>
            </Grid>

            <Grid Grid.Column="2" Grid.RowSpan="2" Margin="8 0 0 0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedPackage}" Value="{x:Null}">
                                <Setter Property="Visibility" Value="Hidden" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <ScrollViewer VerticalScrollBarVisibility="Auto"
                              Content="{Binding Path=SelectedPackage}"
                              ContentTemplate="{StaticResource PackageInfoTemplate}" />

                <StackPanel Grid.Row="1"
                            Orientation="Vertical"
                            HorizontalAlignment="Stretch">
                    <Separator/>
                    <Grid x:Name="InstallOptions" DockPanel.Dock="Top" VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Border Style="{StaticResource TooltipBorder}"
                        Visibility="{Binding GlobalWarningVisibility}" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Stretch"
                               Foreground="{DynamicResource {x:Static wpf:Controls.TooltipTextKey}}" TextWrapping="Wrap">
                        <Run FontWeight="Bold">Warning:</Run> Global installs
                        will affect other apps that use packages via 'npm link'.
                            </TextBlock>
                        </Border>

                        <TextBlock Grid.Row="1" FontWeight="Bold" Margin="0 4 0 4">Options</TextBlock>
                        <Label Grid.Row="5" HorizontalAlignment="Right" VerticalAlignment="Center">Other npm arguments</Label>
                        <TextBox x:Name="ArgumentsTextBox" Grid.Column="1" Grid.Row="5" HorizontalAlignment="Stretch" Text="{Binding Arguments}" Margin="4" TabIndex="6"/>
                        <Label Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center">Add to package.json</Label>
                        <CheckBox x:Name="SaveToPackageJsonCheckbox" Grid.Column="1" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Left" IsChecked="{Binding SaveToPackageJson}" Margin="4" TabIndex="4">(recommended)</CheckBox>
                        <Label Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center">Dependency type</Label>

                        <ComboBox Name="DependencyComboBox"
                                  Grid.Row="2"
                                  Grid.Column="1"
                                  Width="100"
                                  MaxHeight="24"
                                  Margin="4"
                                  KeyboardNavigation.TabIndex="3" SelectedIndex="{Binding SelectedDependencyTypeIndex}"
                              HorizontalAlignment="Left">
                            <ComboBoxItem Tag="St" IsSelected="True">Standard</ComboBoxItem>
                            <ComboBoxItem Tag="Dev">Development</ComboBoxItem>
                            <ComboBoxItem Tag="Opt">Optional</ComboBoxItem>
                            <ComboBoxItem Tag="Global">Global</ComboBoxItem>
                        </ComboBox>

                        <Label Grid.Row="4" HorizontalAlignment="Right" VerticalAlignment="Center">Selected version</Label>
                        <ComboBox Name="SelectedVersionComboBox"
                                  Grid.Row="4"
                                  Grid.Column="1"
                                  SelectedItem="{Binding Path=SelectedVersion}"
                                  SelectedIndex="0"
                                  KeyboardNavigation.TabIndex="5"
                                  SelectionChanged="SelectedVersionComboBox_OnSelectionChanged"
                                  Margin="4">
                            <ComboBox.Resources>
                                <CollectionViewSource x:Key="AvailableVersionViewSource"
                                                      Source="{Binding Path=SelectedPackage.AvailableVersions, Mode=OneWay}"/>
                            </ComboBox.Resources>
                            <ComboBox.ItemsSource>
                                <CompositeCollection>
                                    <sys:String>(latest)</sys:String>
                                    <CollectionContainer Collection="{Binding Source={StaticResource AvailableVersionViewSource}, Mode=OneWay}"/>
                                </CompositeCollection>
                            </ComboBox.ItemsSource>
                        </ComboBox>
                    </Grid>
                    <StackPanel Orientation="Horizontal" Margin="0 8 0 0">
                        <Button x:Name="InstallButton" Margin="0 0 4 0"
                                HorizontalAlignment="Left"
                                Command="{x:Static npmUi:NpmPackageInstallViewModel.InstallCommand}"
                                CommandParameter="{Binding SelectedPackage}"
                                KeyboardNavigation.TabIndex="6"
                                IsDefault="True">
                            _Install Package
                        </Button>
                        <Button Style="{StaticResource NavigationButton}" VerticalAlignment="Center" Margin="5 0 0 0" 
                                Click="ResetOptionsButton_Click" KeyboardNavigation.TabIndex="7">
                            Reset Options
                        </Button>
                    </StackPanel>
                </StackPanel>
            </Grid>

            <!-- Cache control and output -->
            <!-- (Together in the same grid so the splitter works) -->

        </Grid>

        <Grid Visibility="{Binding LoadingCatalogControlVisibility}">
            <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Center">
                <Label Content="{Binding LoadingCatalogMessage}"
                       HorizontalAlignment="Center"
                       HorizontalContentAlignment="Center" />

                <ProgressBar x:Name="_loadingProgress"
                             Height="16"
                             Margin="50, 4, 50, 4"
                             IsIndeterminate="True"
                             IsEnabled="{Binding IsLoadingCatalog}" />
                <TextBlock Text="{Binding LoadingCatalogProgressMessage}"
                           HorizontalAlignment="Center" />
            </StackPanel>
        </Grid>
    </Grid>

</ui:DialogWindowVersioningWorkaround>
